@import "./var";
@import "./mixin";

.btn {
  padding: 0 10px;
  opacity: 1;
  transition: background-color,color .3s ease;
  font-size: 24px;
  text-align: center;
  border-radius: 6px;
  &-default {
    background-color: #eee;
    color: $color;
  }
  &-primary {
    background-color: $brand-primary;
    color: #ffffff;
  }
  &-success {
    background-color: $brand-success;
    color: #FFFFFF;
  }
  &-warning {
    background-color: $brand-warning;
    color: #ffffff;
  }
  &-large {
    height: 90px;
    line-height: 90px;
    border-radius: 90px;
    font-size: 36px;
    padding: 0 40px;
  }
  &-md {
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    border-radius: 10px;
    padding: 0 20px;
    &-radius {
      border-radius: 60px;
    }
  }
  &-disabled {
    background-color: #bbb;
    color: #efefef;
    &:active {
      opacity: 1;
    }
  }
  &:active {
    opacity: .6;
  }
}